<template>
	<view class="content">
		<swiper :indicator-dots="false" :autoplay="true" :interval="4000" :duration="1000" class="swiper" 
		:style="{'height':windowHeight}" @animationfinish="animationfinish">
			<swiper-item>
				<view class="swiper-item" :style="{'height':windowHeight}">
					<image src="../../../s/icon_guide01.png" style="width: 100%;height: 65%;"></image>
					<view style="text-align: center;font-size: 24px;margin-top: 20px;font-weight: bold;">超多美食任你选</view>
					<view style="text-align: center;font-size: 14px;margin-top: 20px;">给您丰富、放心、营养的美食</view>
					<view :style="'margin-left:'+marginLeft+';margin-top:30px;width:120px;'">
						<view style="background: #FF4440;margin-right: 15pt;width: 20pt;height: 3pt;float: left;border-radius: 2px;"></view>
						<view style="background: #FAD9D9;margin-right: 15pt;width: 20pt;height: 3pt;float: left;border-radius: 2px;"></view>
						<view style="background: #FAD9D9;width: 20pt;height: 3pt;float: left;border-radius: 2px;"></view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" :style="{'height':windowHeight}">
					<image src="../../../s/icon_guide02.png" style="width: 100%;height: 65%;"></image>
					<view style="text-align: center;font-size: 24px;margin-top: 20px;font-weight: bold;">精选商家入驻</view>
					<view style="text-align: center;font-size: 14px;margin-top: 20px;">告别不健康的食物</view> 
					<view :style="'margin-left:'+marginLeft+';margin-top:30px;width:120px;'">
						<view style="background: #FAD9D9;margin-right: 15pt;width: 20pt;height: 3pt;float: left;border-radius: 2px;"></view>
						<view style="background: #FF4440;margin-right: 15pt;width: 20pt;height: 3pt;float: left;border-radius: 2px;"></view>
						<view style="background: #FAD9D9;width: 20pt;height: 3pt;float: left;border-radius: 2px;"></view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" :style="{'height':windowHeight}">
					<image src="../../../s/icon_guide03.png" style="width: 100%;height: 65%;"></image>
					<view style="text-align: center;font-size: 24px;margin-top: 20px;font-weight: bold;">商品评价看得见</view>
					<view style="text-align: center;font-size: 14px;margin-top: 20px;">真实评价让购买更放心</view>
					<view :style="'margin-left:'+marginLeft+';margin-top:30px;width:120px;'">
						<view style="background: #FAD9D9;margin-right: 15pt;width: 20pt;height: 3pt;float: left;border-radius: 2px;"></view>
						<view style="background: #FAD9D9;margin-right: 15pt;width: 20pt;height: 3pt;float: left;border-radius: 2px;"></view>
						<view style="background: #FF4440;width: 20pt;height: 3pt;float: left;border-radius: 2px;"></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				windowHeight: '603px'  ,//定义手机屏幕高度值变量
				marginLeft:0,
			}
		},
		onLoad() {
			var _me = this;
			uni.getSystemInfo({//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高
				success: function(res) {
					_me.windowHeight = res.windowHeight + 'px';
					_me.marginLeft = res.windowWidth/2-60+'px'
				}
			});
		},
		methods: {
			animationfinish(e) {
				//判断到最后一张后，自动转向进入注册页
				if (e.detail.current ==2) {
					setTimeout(function() {
						uni.reLaunch({url: '/pages/client/login/login'});
					}, 1000)
				}
			}
		}
	}
</script>
<style>
	.swiper {
		width: 100%;
		/*     height: 100vw; */
		/* background: red; */
	}
</style>